<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编译中梦见未来</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <!-- 不在敲Html代码了 -->
        <!-- PS与原教程完全不一样，核心原理差不多 -->
        <!-- 商品1 -->
        <div class="goods">
            <!-- 商品名称 -->
            <div class="title">ECS共享型 s6</div>
            <!-- 商品价格 -->
            <div class="price">
                <!-- sup上标 -->
                <span class="price-integer"><sup>￥</sup>99</span>
                <span class="price-unit">/ 年</span>
            </div>
            <!-- 商品介绍 -->
            <div class="description">最新代产品，性能强劲，广泛适用于建站等轻量应用</div>
            <!-- 商品的特性 -->
            <div class="feature-container">
                <!-- 没有使用li，效果也一样 -->
                <div class="feature">2核4G</div>
                <div class="feature">1~5M可选</div>
                <div class="feature">个人新用户专享</div>
            </div>
            <!-- 采购按钮 -->
            <div class="bt">马上采购</div>
        </div>


        <!-- 商品2 -->
        <div class="goods">
            <div class="title">云数据库MySQL</div>
            <div class="price">
                <span class="price-integer"><sup>￥</sup>1024</span>
                <span class="price-unit">/ 年</span>
            </div>
            <div class="description">高安全等级，5倍性能提升</div>
            <div class="feature-container">
                <div class="feature">高安全等级，保证数据库安全性</div>
                <div class="feature">多种部署架构，满足多类可用性要求</div>
                <div class="feature">免去90%运维烦恼</div>
            </div>
            <div class="bt">马上采购</div>
        </div>


        <!-- 商品3 -->
        <div class="goods">
            <div class="title">对象存储OSS存储包</div>
            <div class="price">
                <span class="price-integer"><sup>￥</sup>99</span>
                <span class="price-unit">/ 年</span>
            </div>
            <div class="description">适合图片/音视频等多媒体数据存储</div>
            <div class="feature-container">
                <div class="feature">深度集成数据处理服务</div>
                <div class="feature">生命周期管理降低成本</div>
            </div>
            <div class="bt">
                马上采购
            </div>
        </div>


    </div>
</body>

</html>